<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../assets/返回.png" alt="" />
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>血糖</span>
      </div>
      <div class="div">
        <img @click="add()" src="../../../assets/蓝添加.png" alt="" />
        <span @click="add()" class="solid">新增记录</span>
      </div>
    </header>
    <div
      style="
        background: #ffffff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px 0;
        box-sizing: border-box;
      "
    >
      <div
        class="divRound"
        @click="
          $router.push({ path: '/XueTangHistory', query: { userid: userid } })
        "
      >
        历史记录
      </div>
      <van-circle
        size="110px"
        color="#1da4f2"
        v-model="currentRate"
        :rate="100"
        :speed="100"
      >
        <template #default>
          <div style="" class="rateDiv">
            <p>{{ Common.formatDate(new Date(), 'yyyy-mm-dd') }}</p>
            <p>{{ textRound.name }}</p>
            <p>{{ textRound.content }}</p>
            <p>{{ textRound.unit }}</p>
          </div>
        </template>
      </van-circle>
      <div
        class="divRound"
        @click="
          $router.push({ path: '/ZhiLiaoList', query: { userid: userid } })
        "
      >
        治疗计划维护
      </div>
    </div>
    <div>
      <div style="margin-top: 10px" class="tableTitle color_green">
        <!--        <span style="display: flex;align-items: center;color: #333333">-->
        <!--          全部-->
        <!--          <img style="width: 13px;height: 7px;margin-left: 5px" src="../../../assets/sortBottom.png" alt="">-->
        <!--        </span>-->
        <van-dropdown-menu active-color="#1989fa">
          <van-dropdown-item
            @change="changeMenu"
            v-model="value1"
            :options="option1"
          />
        </van-dropdown-menu>
        <span>血糖（mmol/L）</span>
        <span
          @click="xueTangShow = true"
          style="display: flex; align-items: center"
        >
          <img
            style="width: 15px; height: 15px; margin-right: 5px"
            src="../../../assets/帮助绿.png"
            alt=""
          />
          参考值
        </span>
      </div>
      <div class="main" ref="main" style="width: 100%; height: 300px"></div>
      <div>
        <div class="left">
          <ul>
            <li><a class="hengXian"></a></li>
            <li></li>
          </ul>
          <!--          color: ['#7CB140', '#FF99CC', '#BE98E4', '#43C8DB'],-->
        </div>
        <div class="right"></div>
      </div>
    </div>
    <van-dialog
      v-model="xueTangShow"
      width="80%"
      :style="{ maxHeight: '70%', overflow: 'auto' }"
      confirm-button-color="#1da4f2"
      confirmButtonText="知道了"
      :lock-scroll="false"
    >
      <template #default>
        <div class="popDiv">
          <div
            style="
              display: flex;
              justify-content: center;
              height: 44px;
              align-items: center;
              position: sticky;
              top: 0;
              background: #ffffff;
              font-size: 15px;
            "
          >
            血糖参考值
          </div>
          <div style="width: 95%; margin: 0 auto">
            <img
              style="width: 100%; height: 310px"
              src="../../../assets/血糖参考值.png"
              alt=""
            />
            <p>注: 1.空腹指早晨6~8点，且八小时前未进食除水以外的其他事物。</p>
            <p>
              2.餐后时间，一般指从进食第一口时开始计时(即从开始吃饭时进行计时)。
            </p>
            <p>3.以上数据仅供参考。</p>
          </div>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'XueTangEchart',
  data () {
    return {
      userid: this.$route.query.userid,
      listArr: [],
      currentRate: 100,
      xueTangShow: false,
      value1: 10,
      option1: [
        { text: '全部', value: 10 },
        { text: '空腹', value: 0 },
        { text: '餐后1小时', value: 1 },
        { text: '餐后2小时', value: 2 },
        { text: '餐后3小时', value: 3 }
      ]
    }
  },
  mounted () {
    // 血糖值
    sessionStorage.removeItem('xueTangData')
    this.getData()
  },
  computed: {
    dateList () {
      let today = new Date() // 获取今天的日期
      let date2 = new Date(today)
      let dateArray = []
      date2.setDate(today.getDate() + 7) // 获取7天以后的日期
      for (let i = 0; i < 7; i++) {
        let everyDay = date2.setDate(today.getDate() - i)
        dateArray.push(this.Common.formatDate(new Date(everyDay), 'yyyy-mm-dd')) // 获取未来7天内的日期
      }
      dateArray.sort()
      return dateArray
    },
    noDinner () {
      if (this.listArr[0]) {
        // let data = []
        // this.dateList.map((odd, oddIndex) => {
        //   this.listArr[0].map((curr, index) => {
        //     if (odd == Object.keys(curr)[0]) {
        //       data.push(Object.values(curr)[0])
        //     } else {
        //       data.push('')
        //     }
        //   })
        // })
        return this.getNumber(this.listArr[0])
      } else {
        return []
      }
    },
    OneDinner () {
      if (this.listArr[1] && this.listArr[1].length > 0) {
        // let data = []
        // this.dateList.map((odd, oddIndex) => {
        //   this.listArr[1].map((curr, index) => {
        //     if (odd == Object.keys(curr)[0]) {
        //       data.push(Object.values(curr)[0])
        //     } else {
        //       data.push('')
        //     }
        //   })
        // })
        return this.getNumber(this.listArr[1])
      } else {
        return []
      }
    },
    TwoDinner () {
      if (this.listArr[2]) {
        // let data = []
        // this.dateList.map((odd, oddIndex) => {
        //   this.listArr[2].map((curr, index) => {
        //     if (odd == Object.keys(curr)[0]) {
        //       data.push(Object.values(curr)[0])
        //     } else {
        //       data.push('')
        //     }
        //   })
        // })
        return this.getNumber(this.listArr[2])
      } else {
        return []
      }
    },
    ThreeDinner () {
      if (this.listArr[3]) {
        // let data = []
        // this.dateList.map((odd, oddIndex) => {
        //   this.listArr[3].map((curr, index) => {
        //     if (odd == Object.keys(curr)[0]) {
        //       data.push(Object.values(curr)[0])
        //     } else {
        //       data.push('')
        //     }
        //   })
        // })
        return this.getNumber(this.listArr[3])
      } else {
        return []
      }
    },
    // 头部圆圈内参数
    textRound () {
      let obj = {
        name: '',
        content: '',
        unit: ''
      }
      if (!this.listArr.tou) {
        obj.name = '暂无血糖记录'
        return obj
      } else {
        obj.content = this.listArr.tou.content
        obj.unit = 'mmol/L'
        // "chooseid": 0,   0:空腹 1:餐后1小时 2:餐后2小时 3：餐后三小时
        if (this.listArr.tou.chooseid == 0) {
          obj.name = '空腹'
          return obj
        } else if (this.listArr.tou.chooseid == 1) {
          obj.name = '餐后1小时'
          return obj
        } else if (this.listArr.tou.chooseid == 2) {
          obj.name = '餐后2小时'
          return obj
        } else if (this.listArr.tou.chooseid == 3) {
          obj.name = '餐后3小时'
          return obj
        }
      }
    }
  },
  methods: {
    getNumber (list) {
      let data = ['', '', '', '', '', '', '']
      list.map((curr, index) => {
        this.dateList.map((odd, oddIndex) => {
          if (odd == Object.keys(curr)[0]) {
            data[oddIndex] = Object.values(curr)[0]
          } else {
          }
        })
      })
      return data
    },
    // 点击筛选条件
    changeMenu () {
      this.getData()
    },
    getData () {
      this.$http
        .healthXueTang({ userid: this.userid, fenlei: this.value1 })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.listArr = res.data.data
          } else {
            this.$toast(res.data.msg)
          }
          this.drawCharts()
        })
        .catch((err) => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    drawLine () {
      const chart = this.$refs.main
      let charts = echarts.init(chart)
      var option = {
        title: {
          text: '',
          subtext: '',
          textStyle: {
            fontSize: 13
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '6%',
          right: '4%',
          bottom: '5%',
          containLabel: true,
          y2: 200
        },
        legend: [
          {
            show: true,
            itemWidth: 20,
            itemHeight: 3,
            itemGap: 5,
            top: '5',
            data: [
              { name: '空腹    ', icon: 'rect' },
              { name: '餐后1h', icon: 'rect' },
              { name: '餐后2h', icon: 'rect' },
              { name: '餐后3h', icon: 'rect' }
            ], // 分别修改legend格式
            right: '55%',
            textStyle: {
              fontSize: 12,
              color: '#333'
            }
          },
          {
            show: true,
            // icon: 'rect',
            itemWidth: 20,
            itemHeight: 10,
            itemGap: 5,
            top: '10',
            // x:'center',
            selectedMode: false,
            data: [
              { name: '正常', icon: 'circle' },
              { name: '偏高', icon: 'circle' },
              { name: '偏低', icon: 'circle' }
            ], // 分别修改legend格式
            right: '5%',
            textStyle: {
              fontSize: 12,
              color: '#333'
            }
          }
        ],
        xAxis: {
          boundaryGap: false,
          type: 'category',
          data: this.dateList,
          offset: 3.5,
          axisLine: {
            // x轴坐标轴，false为隐藏，true为显示
            show: false
          },
          axisLabel: {
            interval: 0,
            formatter: function (val) {
              return val.split('2021-').join('').split('-').join('/') + '\n' + val.split('-')[0]
            }
          },
          max: 6
        },
        visualMap: [
          {
            top: 10,
            left: 10,
            show: false,
            dimension: 1,
            seriesIndex: 0,
            icon: 'rect', // 形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
            itemWidth: 15, // 设置宽度
            itemHeight: 2, // 设置高度
            textStyle: {
              // 图例文字的样式
              color: '#333', // 灰色
              fontSize: 13
            },
            // inRange:{
            //   color:["#F39800","#F39800","#F39800"]
            // },
            pieces: [
              {
                label: '空腹    ',
                min: 3.9,
                max: 8.3,
                color: '#1DA4F2' // 蓝色
              },
              {
                label: '空腹',
                lt: 3.9,
                color: '#F39800' // 橙色
              },
              {
                label: '空腹',
                gt: 8.3,
                color: '#E3170D' // 红色
              }
            ]
          },
          {
            top: 10,
            left: 10,
            show: false,
            dimension: 1,
            seriesIndex: 1,
            icon: 'rect', // 形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
            itemWidth: 15, // 设置宽度
            itemHeight: 2, // 设置高度
            textStyle: {
              // 图例文字的样式
              color: '#333',
              fontSize: 13
            },
            pieces: [
              {
                label: '餐后1h',
                min: 6.7,
                max: 18.1,
                color: '#1DA4F2'
              },
              {
                label: '餐后1h',
                lt: 6.7,
                color: '#F39800'
              },
              {
                label: '餐后1h',
                gt: 18.1,
                color: '#E3170D'
              }
            ]
          },
          {
            top: 10,
            left: 10,
            show: false,
            dimension: 1,
            seriesIndex: 2,
            icon: 'rect', // 形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
            itemWidth: 15, // 设置宽度
            itemHeight: 2, // 设置高度
            textStyle: {
              // 图例文字的样式
              color: '#333',
              fontSize: 13
            },
            pieces: [
              {
                label: '餐后2h',
                min: 5.0,
                max: 14.5,
                color: '#1DA4F2'
              },
              {
                label: '餐后2h',
                lt: 5,
                color: '#F39800'
              },
              {
                label: '餐后2h',
                gt: 14.5,
                color: '#E3170D'
              }
            ]
          },
          {
            top: 10,
            left: 10,
            show: false,
            dimension: 1,
            seriesIndex: 3,
            icon: 'rect', // 形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
            itemWidth: 15, // 设置宽度
            itemHeight: 2, // 设置高度
            textStyle: {
              // 图例文字的样式
              color: '#333',
              fontSize: 13
            },
            pieces: [
              {
                label: '餐后3h',
                min: 4.4,
                max: 11.2,
                color: '#1DA4F2'
              },
              {
                label: '餐后3h',
                lt: 4.4,
                color: '#F39800'
              },
              {
                label: '餐后3h',
                gt: 11.2,
                color: '#E3170D'
              }
            ]
          }
        ],
        yAxis: {
          type: 'value',
          name: 'mmol/L',
          nameLocation: 'middle',
          nameTextStyle: {
            fontSize: 14,
            padding: 10
          },
          min: 0,
          max: 25,
          show: true,
          position: 'left',
          axisLine: {
            // y轴坐标轴，false为隐藏，true为显示
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              // y轴网格线设置
              color: '#ccc',
              width: 1,
              type: 'dotted'
            }
          }
        },
        series: [
          {
            name: '空腹    ',
            type: 'line',
            data: this.noDinner,
            connectNulls: true,
            symbol: 'circle', // 拐点样式
            symbolSize: 4, // 拐点大小
            lineStyle: {
              color: '#7CB140', // 设置折线的颜色-绿色
              borderColor: '#7CB140'
            },
            itemStyle: {
              // 设置点的颜色
              normal: {
                label: {
                  show: true
                },
                color: '#7CB140' // 设置icon的颜色-绿色
              }
            }
          },
          {
            name: '餐后1h',
            type: 'line',
            data: this.OneDinner,
            connectNulls: true,
            symbol: 'circle', // 拐点样式
            symbolSize: 4, // 拐点大小
            lineStyle: {
              color: '#FF99CC', // 设置折线的颜色
              borderColor: '#FF99CC'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true
                },
                color: '#FF99CC' // 设置icon的颜色-粉色
                //   function (params) {
                //   if (params.value > 18.1) {
                //     return '#E3170D'
                //   } else if (params.value < 6.7) {
                //     return '#E3170D'
                //   } else {
                //     return '#1da4f2'
                //   }
                // }
              }
            }
          },
          {
            name: '餐后2h',
            type: 'line',
            data: this.TwoDinner,
            connectNulls: true,
            symbol: 'circle', // 拐点样式
            symbolSize: 4, // 拐点大小
            lineStyle: {
              color: '#BE98E4', // 设置折线的颜色
              borderColor: '#BE98E4'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true
                },
                color: '#BE98E4' // 设置icon的颜色-紫色
                // color: function (params) {
                //   if (params.value > 14.5) {
                //     return '#E3170D'
                //   } else if (params.value < 18.3) {
                //     return '#E3170D'
                //   } else {
                //     return '#1da4f2'
                //   }
                // },
              }
            }
          },
          {
            name: '餐后3h',
            type: 'line',
            stack: '总量',
            connectNulls: true,
            data: this.ThreeDinner,
            symbol: 'circle', // 拐点样式
            symbolSize: 4, // 拐点大小
            lineStyle: {
              color: '#43C8DB', // 设置折线的颜色
              borderColor: '#43C8DB'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true
                },
                color: '#43C8DB' // 设置icon的颜色-青色
                // color: function (params) {
                //   if (params.value > 11.2) {
                //     return '#E3170D'
                //   } else if (params.value < 4.4) {
                //     return '#E3170D'
                //   } else {
                //     return '#1da4f2'
                //   }
                // },
              }
            }
          },
          {
            name: '正常',
            type: 'line',
            itemStyle: {
              // 设置点的颜色
              normal: {
                label: {
                  show: true
                },
                color: '#1DA4F2' // 蓝色
              }
            }
          },
          {
            name: '偏高',
            type: 'line',
            itemStyle: {
              // 设置点的颜色
              normal: {
                label: {
                  show: true
                },
                color: '#E3170D' // 红色
              }
            }
          },
          {
            name: '偏低',
            type: 'line',
            itemStyle: {
              // 设置点的颜色
              normal: {
                label: {
                  show: true
                },
                color: '#F39800' // 橙色
              }
            }
          }
        ]
        // dataZoom: [{
        //   type: 'slider',
        //   show: true,
        //   xAxisIndex: [0],
        //   left: '9%',
        //   bottom: -5,
        //   start: 0,
        //   end: 90 // 初始化滚动条
        // }]
      }
      charts.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        charts.resize()
      })
    },
    drawCharts () {
      this.drawLine()
    },
    // 新增记录跳转
    add () {
      this.$router.push({ path: '/AddXueTang', query: { userid: this.userid } })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  },
  updated () {
    this.drawCharts()
  }
}
</script>

<style scoped>
.all {
  width: 100%;
  height: 100%;
  background: #faf9fe;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div {
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  font-size: 15px;
  font-weight: bold;
}
.div img {
  margin-right: 5px;
}
.div:nth-child(1) img {
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span {
  margin-right: 15px;
}
.div:nth-child(2) {
  justify-content: center;
}
.div:nth-child(3) {
  justify-content: flex-end;
}
.solid {
  color: #1da4f2;
}
.rateDiv {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 11px;
  color: #999999;
}
.divRound {
  width: 60px;
  height: 60px;
  box-shadow: 0px 3px 10px 0px rgba(29, 164, 242, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #1da4f2;
  padding: 0 5px;
  box-sizing: border-box;
  text-align: center;
}
.tableTitle {
  height: 50px;
  background: rgba(29, 164, 242, 0.1);
  justify-content: space-between;
  color: #1da4f2;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;
  box-sizing: border-box;
}
.color_green {
  color: #43c8db !important;
}
.popDiv {
  font-size: 12px;
}
.popDiv p {
  line-height: 1.6;
}
/deep/ .van-dialog__footer {
  position: sticky;
  bottom: 0;
}
/deep/ .van-dropdown-menu__title::after {
  border-color: transparent transparent #333 #333;
}
/deep/ .van-dropdown-menu__bar {
  background: transparent;
  box-shadow: none;
}
.main {
  background: #ffffff;
}
</style>
